<template>
  <div class="main-content">
    <screenTop></screenTop>
    <div class="page-content">
      <router-view></router-view>
      <bottom-content class="page-box"></bottom-content>
    </div>
  </div>
</template>

<script>
import screenTop from '../top/index.vue'
import menuBox from '../menu/index.vue'
import BottomContent from "./bottomContent.vue";

export default {
  name: "index",
  components: {BottomContent, screenTop, menuBox},
}
</script>

<style scoped lang="scss">
.main-content {
  height: 100%;
  position: relative;
  overflow: hidden;

  .page-content {
    width: calc(100% - 68px);
    height: calc(100% - 114px);
    padding: 20px 34px 14px;
    background-color: #fff;
    position: relative;
    overflow: hidden;

    &:before, &:after {
      content: '';
      width: 120px;
      height: calc(100% - 34px);
      position: absolute;
      top: 20px;
      bottom: 14px;
      z-index: 2;
    }

    &:before {
      background: url("@/assets/images/img-left-border.png") no-repeat left top;
      background-size: 100% 100%;
      left: 14px;
    }

    &:after {
      background: url("@/assets/images/img-right-border.png") no-repeat left top;
      background-size: 100% 100%;
      right: 14px;
    }

  }
}
</style>
